<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    {#    <link href="/static/css/bootsnav.css" rel="stylesheet">#}
    {#    <script src="//code.jquery.com/jquery.min.js"></script>#}
    {#    <script src="/static/js/bootstrap.min.js"></script>#}
    {#    <script src="/static/js/bootsnav.js"></script>#}

    <style>

        .mydiv {
            border-radius: 5px;
            box-shadow: 4px 4px 8px gray;
            padding: 10px;
            background-color: #eeeeee;
            width: 90%;
            margin-left: 5%
        }

        .mydiv li {
            float: left;
            width: 20%;
            margin-top: 5px;
            list-style: none;
        }

        .mydiv li a {
            color: #27415c;
            text-decoration: none;
        / / 下划线

        }
    </style>
    <link rel="shortcut icon" href="/static/favicon.ico">
    <script src="/static/vue.js"></script>
    <script src="/static/axios.js/"></script>
</head>
<body>

{% include 'menu.html' %}


{#    <h1>欢迎登录：{{ username }}</h1>#}

{#    搜索框#}
<div class="input-group" style="width: 60%;margin-left: 20%;">
    <input oninput="Search_act(event)" type="text" style="text-align: center;border-radius: 50px 0 0 0"
           class="form-control" placeholder="请输入书签的关键字..">
    <span class="input-group-btn">
                <button class="btn btn-default" style="border-radius: 0 50px 0 0">Search</button>
        </span>


</div>

{#    宽90% 左外边距5% 让div居中#}
<div id="myapp" class="mydiv" style="height: 500px;overflow-y:auto">
    <h4 style="margin-top: -10px">欢迎使用传送门: <span style="font-size: xx-small">（请保存本页面为书签，若想新建超链接，请
        <a href="#" @click="add_link_div_show=true">点击这里</a>）</span>
    </h4>

    <ul id="myul">
        {#        {% for i in hrefs %}#}
        {#            <li>#}
        {#                <span class="glyphicon glyphicon-link"></span>#}
        {#                <a href="{{ i.url }}" target="_blank">{{ i.name }}</a>#}
        {#            </li>#}
        {#        {% endfor %}#}

        <li v-for=" (i,key) in v_hrefs">
            {#            <h5>[[key]]</h5>#}
            <span class="glyphicon glyphicon-link"></span>
            <a :href="[[ i.url ]]" target="_blank">[[ i.name ]]</a>
        </li>
    </ul>

    {#    新增超链接窗口#}
    <div v-show="add_link_div_show" id="new_link_div" class="input-group"
         style="display: block;position: fixed;top:40%;left: 25%;width: 50%;box-shadow: 4px 4px 6px #9a9899;border: #9a9899 solid 1px">
        <input v-model="new_link_name" id="new_link_name" type="text" class="form-control" autocomplete="off" placeholder="请输入新超链接的描述" style="width: 80%">
        <input v-model="new_link_url" id="new_link_url" type="text" class="form-control" autocomplete="off" placeholder="请输入新超链接的url" style="width:80% ">
        <span class="input-group-btn" style="width: 20%">
                <button @click="add_link" class="btn btn-default" type="button" style="height: 68px;width:50% ">添加</button>
                <button @click="cancel_add_link_div" class="btn btn-default" type="button" style="height: 68px;width:50% ">取消</button>
        </span>
    </div>


</div>

<br>
{#  公告div#}
<div style="height: 300px;color: #43bee8" class="mydiv">
    <h3>公告 <span class="glyphicon glyphicon-globe"></span></h3>
    {#        <h5>#}
    {#            平台新增了一些功能，欢迎使用！ <br>#}
    {#            修复了xxx问题，开启了xxxxx <br>#}
    {#            xxxxxxx <br>#}
    {#        </h5>#}
    {% for i in notice %}
        <h4 style="color:black;">{{ i.content }}<span style="font-size: xx-small;color: gray">( {{ i.ctime }} )</span>
        </h4>
    {% endfor %}


</div>

{#<script>#}
{#    function Search_act(event) {#}
{#        // 获取事件目标的值#}
{#        console.log(event.target.value)#}
{#        //无法直接输入，hrefs 是个列表嵌套字典的queryset，里面还有& 等特殊符号。可以加引号转化为字符串打印看看,它不是用在dom层的东西#}
{#        // console.log({{ hrefs }})#}
{#        // console.log('{{ hrefs }}')#}
{#        // 那么如果我想在dom层里使用hrefs 该怎么办？ 在views 视图函数中把传过来的hrefs转换#}
{#        // console.log('{{ hrefs }}')   // 这个时候再去打印，发现还是带了很多& 特殊符号，我们没办法解析，把引号去掉试试#}
{#        // console.log({{ hrefs }})  又开始报错了#}
{#        // console.log({{ hrefs|safe }})   // 加上safe 后可以解决后端传递的数据（： ""等字符）解析问题#}
{##}
{#        // 定义旧的hrefs 集合#}
{#        var old_hrefs = {{ hrefs| safe }};#}
{#        var new_hrefs = [];#}
{#        // 实现过滤#}
{#        for (var i = 0; i < old_hrefs.length; i++) {#}
{#            //  console.log(old_hrefs[i]);#}
{#            // 判断输入的值是否存在 hrefs 中，如果有就放到新的列表中存储#}
{#            if (old_hrefs[i].name.toLowerCase().indexOf(event.target.value.toLowerCase()) != -1) {#}
{#                new_hrefs.push(old_hrefs[i])#}
{#            }#}
{#        }#}
{#       console.log(new_hrefs);#}
{##}
{#        // 让页面重新渲染新的hrefs#}
{#        // JS版本#}
{#        var myul = document.getElementById("myul");#}
{#        myul.innerHTML = '';#}
{##}
{#        for (let i = 0; i < new_hrefs.length; i++) {#}
{#            var myli = document.createElement("li");#}
{#            var mya = document.createElement('a');#}
{#            var span = document.createElement('span');#}
{#            span.className = 'glyphicon glyphicon-link'#}
{#            mya.href = new_hrefs[i].href;#}
{#            mya.innerText = new_hrefs[i].name;#}
{#            myli.appendChild(span);#}
{#            myli.appendChild(mya);#}
{#            myul.appendChild(myli);#}
{#        }#}
{##}
{#    }#}
{#</script>#}
<script>
    let vm = new Vue({
        el: "#myapp",
        delimiters: ["[[", "]]"], // 解决vue和django的冲突
        data: {
            v_hrefs: {{ hrefs|safe }},
            add_link_div_show: false,
            new_link_url:"",
            new_link_name:""

        },
        methods:{
            clear_add_link_input: function () {
                this.new_link_name = ""
                this.new_link_url = ""
            },
            cancel_add_link_div: function () {
                this.clear_add_link_input();
                this.add_link_div_show = false
            },
            add_link: function () {
                this.add_link_div_show=true;
                // 获取用户输入内容
                let new_link_name = this.new_link_name
                let new_link_url = this.new_link_url
                console.log(new_link_url);
                console.log(new_link_name);
                // 发送请求给后端
                axios({
                    method: 'get',
                    url: '/add_href/',
                    params: {
                        new_link_name: new_link_name,
                        new_link_url: new_link_url
                    },
                }).then(response=>{
                        this.add_link_div_show = false;
                        document.location.reload();

                })

            }
        }

    })

    function Search_act(event) {
        // 定义旧的hrefs 集合
        var old_hrefs = {{ hrefs| safe }};
        var new_hrefs = [];
        // 实现过滤
        for (var i = 0; i < old_hrefs.length; i++) {
            //  console.log(old_hrefs[i]);
            // 判断输入的值是否存在 hrefs 中，如果有就放到新的列表中存储
            if (old_hrefs[i].name.toLowerCase().indexOf(event.target.value.toLowerCase()) != -1) {
                new_hrefs.push(old_hrefs[i])
            }
        }
        console.log(new_hrefs);
        vm.v_hrefs = new_hrefs;
    }

</script>
</body>
</html>
